<!--
 * @Author: wangming
 * @Date: 2021-05-24 16:01:23
 * @LastEditors: wangming
 * @LastEditTime: 2022-08-02 14:43:05
 * @Description: 万能页面布局 无Form 状态
-->
<template>
  <div class="ks-row-middle lhlabel">
    <div
      v-if="!config.__config.noItem"
      class="f14 g6"
      :style="{ width: config.__config.labelWidth + 'px' }"
    >
      {{ config.__config.label }}
    </div>
    <component
      class="ks-col"
      :disabled="config.__config.disabled"
      :isEdit="false"
      :is="config.tagName"
      :form="form"
      :config="config"
      v-model="form[config.modelName]"
    ></component>
  </div>
</template>

<script>
const CONFIG_LANG = ["label", "placeholder", "explainValue", "content", "alt"];
import myMixin from "@/pageComponents/myMixin";
import myformComponents from "../__form/index.js";
export default {
  components: { ...myformComponents },
  mixins: [myMixin],
  watch: {
    "$i18n.locale": {
      handler: function () {
        if (!!this.config.__config.i18n && process.env.VUE_APP_USER === "APP") {
          CONFIG_LANG.forEach(this.tranConfigLang);
        }
      },
      immediate: true,
    },
  },
  methods: {
    tranConfigLang(key) {
      let code = this.config.__config?.i18n?.[key];
      if (!!code) {
        this.config.__config[key] = this.$t(code);
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.hide {
  background-image: url("~@/assets/image/hide.png");
}
.lhlabel {
  line-height: 32px;
}
</style>
